<html>

<head>
    <meta charset="utf-8">
    <title>添加选手</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/${BasePath}/static/css/headpic.css" media="all" />
    <link rel="stylesheet" href="/${BasePath}/static/layui/css/layui.css" media="all" type="text/css">
    <link rel="stylesheet" href="/${BasePath}/static/css/public.css" media="all" type="text/css"> </head>

<body class="childrenBody">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	  <legend>新增投票活动</legend>
	</fieldset>
    <form id="playerForm" class="layui-form" lay-filter="example">
    <input type="hidden" name="activityid" id="activityid" value="${vPlayer.activityid!'0'}">
    <input type="hidden" name="id" id="id" value="${vPlayer.id!'0'}">
    <input type="hidden" name="playerpic" id="playerpic" value="${vPlayer.playerpicbig!'/${BasePath}/static/images/userface4.jpg'}">
    <input type="hidden" name="playerpicbig" id="playerpicbig" value="${vPlayer.playerpicbig!'/${BasePath}/static/images/userface4.jpg'}">
        <div class="layui-col-md6 layui-col-xs12">
            <div class="layui-form-item">
                <label class="layui-form-label">选手名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="name" value="${vPlayer.name!''}" placeholder="请输入选手昵称" lay-verify="required"  class="layui-input"> </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">点赞数：</label>
                <div class="layui-input-block">
                    <input type="text" name="poll" value="${vPlayer.poll!''}" placeholder="请输入选手点赞数" lay-verify="required/number"  class="layui-input"> </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">宣言</label>
                <div class="layui-input-block">
                    <input type="text" name="declaration" value="${vPlayer.declaration!''}" placeholder="请输入选手宣言" lay-verify="required"  class="layui-input"> </div>
            </div>
            <!-- <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-block">
                    <input type="text" name="tel" value="${vPlayer.tel!''}" placeholder="请输入选手电话" lay-verify="required|phone"  class="layui-input"> </div>
            </div> -->
            
            <div class="layui-form-item">
                <label class="layui-form-label">选手图片</label>
                <div class="layui-input-block">
                	<div style="position:relative">
                		<button type="button" class="layui-btn layui-btn-normal">选择图片</button>
                		<input id="upfile"  type="file" name="upfile" style="position:absolute;top:0;left:0;bottom:0;opacity:0"> 
                	</div>
                	<div class="layui-upload-list" style="width:150px">
                		<img id="upload" class="shop-logo" style="width:auto;max-width:100%;height:auto" alt="点击上传" src="${vPlayer.playerpicbig!'/${BasePath}/static/images/userface4.jpg'}">
                	</div> 
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" type="button" lay-filter="form">立即提交</button>
                    <a class="layui-btn layui-btn-normal" href="javascript:history.go(-1)">返回选手列表</a>
                </div>
            </div>
        </div>
    </form>
    <script type="text/javascript" src="/${BasePath}/static/layui/layui.js" charset="utf-8" ></script>
    <script type="text/javascript" src="/${BasePath}/static/js/common/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    layui.use(['form', 'layedit', 'laydate'], function() {
        var form = layui.form,
            layer = layui.layer;
        form.on('submit(form)', function() {
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/${BasePath}/activity/saveOrUpdatePlayer",
                    data: $('#playerForm').serialize(),
                    async: false,
                    error: function(request) {
                        layer.msg('系统错误！');
                    },
                    success: function(data) {
                        if(data.code = "1") {
                            layer.msg(data.msg, {
                                time: 1000
                            }, function() { //提示框设定显示1秒
                            	window.location.href="/${BasePath}/activity/playerList?id=${vPlayer.activityid!'0'}";
                            })
                        } else {
                            layer.msg(data.msg);
                        }
                    }
                });
            })
    });
    $("#upfile").on('change',function(){
        var filePath = $(this).val(),         //获取到input的value，里面是文件的路径
           fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
           imgBase64 = '',      //存储图片的imgBase64
           fileObj = this.files[0]; //上传文件的对象,要这样写才行，用jquery写法获取不到对象
           
       // 检查是否是图片
       if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
           layer.msg('上传错误,文件格式必须为：.png/.jpg/.jpeg');
           return;  
       }

       // 调用函数，对图片进行压缩
       compress(fileObj,function(imgBase64){
           imgBase64 = imgBase64;    //存储转换的base64编码
          var str='<img src="'+imgBase64+'"/>';
             $("#upload").attr("src",imgBase64); 
             document.getElementById("playerpicbig").value = imgBase64;
             document.getElementById("playerpic").value = imgBase64;
       });
	});
       
	// 不对图片进行压缩，直接转成base64
   function directTurnIntoBase64(fileObj,callback){
       var r = new FileReader();
       // 转成base64
       r.onload = function(){
          //变成字符串
           imgBase64 = r.result;
           console.log(imgBase64);
           callback(imgBase64);
       }
       r.readAsDataURL(fileObj);    //转成Base64格式
   }

      // 对图片进行压缩
   function compress(fileObj, callback) { 
       if ( typeof (FileReader) === 'undefined') {  
           console.log("当前浏览器内核不支持base64图标压缩");  
           //调用上传方式不压缩  
           directTurnIntoBase64(fileObj,callback);
       }else if(fileObj.size<80000){      //图片小于250k就不压缩
       	 console.log("不需要压缩");  
           directTurnIntoBase64(fileObj,callback);
       } else {  
           try {    
               var reader = new FileReader();  
               reader.onload = function (e) {  
                   var image = $('<img/>');  
                   image.load(function(){  
                	var _canvas = document.createElement("canvas");
               		var w = this.width / 5;
               		var h = this.height / 5;
               		_canvas.setAttribute("width", w);
               		_canvas.setAttribute("height", h);
               		_canvas.getContext("2d").drawImage(this, 0, 0, w, h);
               		var data = _canvas.toDataURL("image/jpeg");
               	
                       //压缩完成执行回调  
                        callback(data);  
                   });  
                   image.attr('src', e.target.result);  
               };  
               reader.readAsDataURL(fileObj);  
           }catch(e){  
               console.log("压缩失败!");  
               //调用直接上传方式  不压缩 
               directTurnIntoBase64(fileObj,callback); 
           }  
		}
       }
    </script>
</body>

</html>